<template>
  <div class="exhibits-draggable-parent">
    <DraggableContainer :referenceLineColor="'rgba(255, 229, 0, 1)'">
      <div :style="{ minWidth: getExbitListWidth }">
        <div
          class="exhibits-box jy-style-height"
          :class="`exhibits-free${getOutlineComponent}`"
          ref="exhibitsRef"
          v-if="props.domShow"
        >
          <draggableComponents
            @mousedown="openrefItem(index)"
            :selectInfo="getExhibitionItem(item.type)"
            :AuxiliaryId="props.AuxiliaryId"
            :isShow="updateType"
            :parentId="props.info.id"
            :width="item.width"
            :height="item.height"
            :defaultX="item.x ? item.x : 1.3888 * index"
            :defaultY="item.y ? item.y : 0"
            :info="item"
            :childId="props.childId"
            :indexs="index"
            v-for="(item, index) in props.info.showpieceList"
            :key="item"
            :MoveIndex="MoveIndex"
            @emitDraggableStart="emitDraggableStart"
            @emitDraggable="emitDraggable"
            @emitDraggableStyle="emitDraggableStyle"
            @emitChildDraggable="emitChildDraggable"
            @emitChildDraggableStyle="emitChildDraggableStyle"
            @emitChildItemDraggable="emitChildItemDraggable"
            @emitChildItemDraggableStyle="emitChildItemDraggableStyle"
            @emitShowcaseDraggable="emitShowcaseDraggable"
            @emitShowcaseDraggableStyle="emitShowcaseDraggableStyle"
          />
        </div>
      </div>
    </DraggableContainer>
  </div>
</template>
  
<script setup lang="ts">
import { getExhibitionItem } from '@/material/index';
import displayBoard from '@/freeComponents/ExhibitsComponent/displayBoard/index.vue';
import exhibitionStand from '@/freeComponents/ExhibitsComponent/exhibitionStand/index.vue';
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
  getdraggableDisabled,
  publicUrls,
} from '@/utils/minxin';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import draggableComponents from '@/freeComponents/draggableComponents/draggableItem.vue';
// import draggableComponentsNew from '@/freeComponents/ExhibitsComponent/index.vue';
import { ref, nextTick, watch, computed } from 'vue';
import { commonDataStore, useProjectStore } from '@/store';
import { getActiveBorder } from '@/hooks/menuHooks';
import { useRoute } from 'vue-router';

const MoveIndex = ref(-1);
const route = useRoute();
const store = useProjectStore();
const commonStore = commonDataStore();
const flag = ref(false);
const props = defineProps({
  info: {
    type: Object,
  },
  indexs: {
    type: Number,
  },
  childId: {
    type: Number,
  },
  ListIndex: {
    type: Number,
  },
  list: {
    type: Object,
  },
  AuxiliaryId: {
    type: Number,
  },
  domShow: {
    type: Boolean,
  },
});

const getExhibitsComponent = () => {
  props.info.showpieceList.forEach((item) => {
    if (getExhibitionItem(item.type)) {
      flag.value = true;
    } else {
      flag.value = false;
    }
  });
};
getExhibitsComponent();
const addwidth = ref(0);
const updateType = ref(true);
// console.log(props.info.showpieceList, 'rem');
addwidth.value = props.info.width ? props.info.width : addwidth.value;
const exhibitsRef = ref();
const emitDraggableStart = (index: number, draggingInfo: any) => {
  store.setStartX(props.childId, index, props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1); //设置当前展品距离相对父元素的xy偏移量
};
const emitDraggable = (index: number, draggingInfo: any, end?: string) => {
  if (end) {
    store.setExhibitsItemWidth(
      props.childId,
      index,
      draggingInfo,
      'end',
      props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
    ); //设置当前展品距离相对父元素的xy偏移量
  } else {
    store.setExhibitsItemWidth(
      props.childId,
      index,
      draggingInfo,
      false,
      props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
    ); //设置当前展品距离相对父元素的xy偏移量
  }

  setTimeout(() => {
    nextTick(() => {
      let rems = addParentWidths(exhibitsRef.value, props.info.showpieceList[index].width, draggingInfo);

      //  return
      if (rems <= 0) {
        //当节点即将超出
        // Math.abs
        let addNumber = getRemConversion(Math.abs(rems) + 20);
        addwidth.value += Number(addNumber.toFixed(4)); //添加到追加的节点中
      } else {
        //当节点未超出时
        if (exhibitsRef.value) {
          var positionedElementsSelector = '.draggable-id' + props.info.id; //获取展品列表中所有拖拽元素
          let delNum = isAnyElementOutOfParent(exhibitsRef.value, positionedElementsSelector); //判断当前未超出节点是否可以进行后移操作
          if (delNum) {
            //有定位元素超出了父级元素
            return;
          } else {
            //当前可减少列表宽度

            var SelectorClass = '.draggable-id' + props.info.id;
            let addNumber = getRemConversion(getParentLeftList(exhibitsRef.value, SelectorClass)); //获取当前可减少的空间宽度 并转化为rem
            addwidth.value -= addNumber;
            //所有定位元素都没有超出父级元素
          }
        }
      }
    });
  }, 100);

  // let
  // getRemConversion
};
const emitDraggableStyle = (index: number, draggingInfo: any, end?: string) => {
  //设置
  store.setExhibitsItemStyle(
    props.childId,
    index,
    draggingInfo,
    end ? end : '',
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置当前展品距离相对父元素的宽高
};

const emitChildDraggable = (index: number, draggingInfo: any) => {
  store.setExhibitsItemImgWidth(
    props.childId,
    index,
    draggingInfo,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置当前展品图片距离相对父元素的xy偏移量
};
const emitChildDraggableStyle = (index: number, draggingInfo: any) => {
  store.setExhibitsItemImgStyle(
    props.childId,
    index,
    draggingInfo,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置当前展品距离相对父元素的宽高
};
const emitChildItemDraggable = (index: number, draggingInfo: any, childIndex: number) => {
  store.setExhibitsGroupWidth(
    props.childId,
    index,
    draggingInfo,
    childIndex,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置分组当前展品图片距离相对父元素的xy偏移量
};
const emitChildItemDraggableStyle = (index: number, draggingInfo: any, childIndex: number) => {
  store.setExhibitsGroupStyle(
    props.childId,
    index,
    draggingInfo,
    childIndex,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置分组当前展品距离相对父元素的宽高
};

const emitShowcaseDraggable = (index: number, draggingInfo: any) => {
  //设置展柜宽高

  store.setshowcaseWidth(
    props.childId,
    index,
    draggingInfo,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置当前展品距离相对父元素的宽高
};
const emitShowcaseDraggableStyle = (index: number, draggingInfo: any) => {
  //设置展柜xy偏移量

  store.setShowcaseStyle(
    props.childId,
    index,
    draggingInfo,
    props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
  ); //设置当前展品图片距离相对父元素的xy偏移量
};
const getExbitListWidth = computed(() => {
  let num = 0;
  props.info.showpieceList.forEach((element) => {
    num += element.width;
  });
  num += addwidth.value;
  props.info.showpieceList.forEach((element) => {
    if (element.x + element.width > num) {
      num = element.x + element.width;
    }
  });
  //    if(props.infoIndex===1){
  // console.log(num+ 'rem')
  //     }
  if (props.info.showpieceList.length === 0) {
    num = 0;
    addwidth.value = 0;
  }
  return num + 'rem';
});
const openrefItem = (itemIndex: number) => {
  MoveIndex.value = itemIndex;
};

const getOutlineComponent = computed(() => {
  console.log(commonStore.templateId);

  switch (commonStore.templateId) {
    case 546821049266245:
      return 1;
      break;
    case 568727972499525:
      return 2;
      break;
    case 584041224159301:
      return 2;
      break;
    case 581876609753157:
      return 3;
      break;
    case 594187892883525:
      return 3;
      break;
    case 598779929522245:
      return 3;
      break;
    default:
      return 99;
      break;
  }
});
 
watch( 
  () => addwidth.value,
  () => {
    store.setExhibitsWidth(
      props.childId,
      addwidth.value,
      props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1,
    );
  },
  { deep: true },
);
watch(
  () => props.info.width,
  () => {
    addwidth.value = props.info.width;
  },
  { deep: true },
);
watch(
  () => store.updateType,
  () => {
    updateType.value = false;
    nextTick(() => {
      updateType.value = true;
      setTimeout(() => {
        getActiveBorder();
      }, 10);
    });
  },
  { deep: true },
);
</script>  

<style scoped lang="less">
.exhibits-free1 {
  position: relative;
  & > #resizable-free:nth-child(3n)::after {
    content: '';
    width: 384px;
    height: 200px;
    position: absolute;
    top: 0;
    left: -280px;
    margin-left: 100px;
    background: url('https://static.jiyi.show/free/style1/fan.png') no-repeat center/100% 100%;
  }
}
.exhibits-draggable-parent {
  padding-right: 50px;
}
:deep(.flot-menu-id55001) {
  top: 530px !important;
}
</style>
